<!--
 * @Descripttion:
 * @version: 1.0.0
 * @Author: htang
 * @Date: 2024-03-02 15:21:05
 * @LastEditors: htang
 * @LastEditTime: 2024-03-02 15:43:47
-->
<template>
  <a-drawer v-model:visible="visible" title="门禁详情信息" placement="right" :width="450">
    <a-form :model="model" :label-col="{ span: 5 }">
      <a-form-item label="设备名称">
        <a-input v-model:value="model.name" :disabled="isDisabled" />
      </a-form-item>
      <a-form-item label="设备类型">
        <JDictSelectTag
          v-model:value="model.equipmentType"
          placeholder="请选择设备类型"
          dictCode="equipment_type"
          allowClear
          :disabled="isDisabled"
        />
      </a-form-item>
      <a-form-item label="设备编码">
        <a-input v-model:value="model.equipmentCode" :disabled="isDisabled" />
      </a-form-item>
      <a-form-item label="HTTP端口">
        <a-input v-model:value="model.httpPort" :disabled="isDisabled" />
      </a-form-item>
      <a-form-item label="设备ID">
        <a-input v-model:value="model.equipmentIp" :disabled="isDisabled" />
      </a-form-item>
      <a-form-item label="开关状态">
        <a-input v-model:value="model.equipmentSwitch" :disabled="isDisabled" />
      </a-form-item>
      <a-form-item label="设备位置">
        <a-input v-model:value="model.position" :disabled="isDisabled" />
      </a-form-item>
      <a-form-item label="sdk端口">
        <a-input v-model:value="model.sdkPort" :disabled="isDisabled" />
      </a-form-item>
      <a-form-item label="站点">
        <a-select v-model:value="model.stationCode" allowClear placeholder="请选择站点" :disabled="isDisabled">
          <template v-for="(item, index) in stationList" :key="index">
            <a-select-option :value="item.stationCode">
              {{ item.name }}
            </a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item label="使用协议">
        <JDictSelectTag
          v-model:value="model.useAgreement"
          placeholder="请选择使用协议"
          dictCode="camera_use_agreement"
          allowClear
          :disabled="isDisabled"
        />
      </a-form-item>
      <a-form-item label="布防状态">
        <a-input v-model:value="model.alarmState" />
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script>
import { watch, ref, nextTick, defineComponent, getCurrentInstance, computed } from 'vue';
import { JDictSelectTag } from '/@/components/Form';
import { accessInfoApi } from '@/api/access';
import { stationListApi } from '/@/api/station/index';
export default defineComponent({
  components: { JDictSelectTag },
  setup(props, { emit }) {
    let visible = ref(false);

    let model = ref({});

    let stationList = ref([]);

    let isDisabled = computed(() => {
      if (model.value.id) {
        return true;
      } else {
        return false;
      }
    });

    async function init(id) {
      stationList.value = await stationListApi({});
      accessInfoApi({ id }).then((res) => {
        model.value = {
          ...res,
        };
      });
    }

    return {
      visible,
      model,
      stationList,
      isDisabled,
      init,
    };
  },
});
</script>